<template>
  <div>
    <a-card title="添加商品"
            style="width: 100%">
      <a-breadcrumb>
        <a-breadcrumb-item><a href="/admin">首页</a></a-breadcrumb-item>
        <a-breadcrumb-item><a href="/admin/itemLists">商品列表</a></a-breadcrumb-item>
        <a-breadcrumb-item>增加商品</a-breadcrumb-item>
      </a-breadcrumb>
      <a-form style="marginTop:40px"
              :form="form"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 8 }"
              @submit="handleSubmit">
        <a-form-item name="name"
                     label="商品名称">
          <a-input v-decorator="['name', { rules: [{ required: true, message: 'Please input your note!' }] }]"
                   name="name" />
        </a-form-item>
        <a-form-item label="商品价格">
          <a-input-number v-decorator="['price']"
                          :min="0" />
        </a-form-item>
        <a-form-item label="商品库存">
          <a-input-number v-decorator="['store']"
                          :min="1" />
        </a-form-item>
        <a-form-item label="商品描述">
          <a-textarea v-decorator="['desc']"
                      placeholder="请输入描述"
                      :auto-size="{ minRows: 3, maxRows: 5 }" />
        </a-form-item>
        <a-form-item label="商品图片">
          <a-upload name="file"
                    :multiple="true"
                    action="/api/upLoad"
                    @change="handleChange">
            <a-button>
              <a-icon type="upload" /> Click to Upload
            </a-button>
            <img :src="thumb"
                 alt="">
          </a-upload>
        </a-form-item>
        <a-form-item label="商品详情">
          <div id="content">
          </div>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 2, offset: 8 }">
          <a-button type="primary"
                    html-type="submit">
            确定
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import E from 'wangeditor'
import { addItem } from '@api'
export default {
  data () {
    return {
      formLayout: 'horizontal',
      headers: {
        authorization: 'authorization-text'
      },
      form: this.$form.createForm(this, { name: 'coordinated' }),
      editor: null,
      thumb: '',
      content: ''
    }
  },
  mounted () {
    this.initRich()
    this.handleSelectChange()
  },
  methods: {
    initRich () {
      const editor = new E('#content')
      // 创建编辑器
      editor.create()
      this.editor = editor
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          values.thumb = this.thumb
          values.content = this.editor.txt.html()
          addItem(
            { ...values }
          ).then(res => {
            if (res.data.code === 200) {
              this.$message.success(res.data.msg, 1, () => {
                this.$router.go(0)
              })
            }
          })
        }
      })
    },
    handleSelectChange () {
      this.form.setFieldsValue({
        name: '',
        price: '',
        desc: '',
        store: 1
      })
    },
    handleChange (info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.thumb = info.file.response.data.url
        this.$message.success('上传成功')
      } else if (info.file.status === 'error') {
        this.$message.error('上传失败')
      }
    }
  }
}
</script>
